<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="jquery-3.1.1.min.js" charset="utf-8"></script>
    <script src="template.js" charset="utf-8"></script>
    <style media="screen">
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        html{
            text-align: center;
            font-family: "Microsoft YaHei";
        }
        h1{
            color: skyblue;
        }
        div{
            height: 100%;
            width: 60%;
            margin: 0 auto;
            text-align: center;
        }
        strong{
            color: red;
        }
        section:nth-child(2n+1){
            background-color: gray;
        }
        section:nth-child(2n){
            background-color: lightgray;
        }
        #time{
            font-weight: bold;
            font-size: 20px;
        }
    </style>
    <title>Document</title>
</head>
<body>
    <h1>十五日天气查询</h1>
    <input type="text" name="" value="" placeholder="请输入你要查询的城市" id="city">
    <button type="button" name="button">开始查询</button>
    <div id="content">

        <script type="text/html" id="day">
            <span>当前城市:<strong>{{area}}</strong></span>

            {{each dayList as aDay}}
                <section>
                    <span id="time">{{aDay.daytime}}</span>
                    <br>
                    <span>温度:{{aDay.night_air_temperature}}~{{aDay.day_air_temperature}}摄氏度</span>
                    <br>
                    <span>白天天气:{{aDay.day_weather}}</span>
                    <span>{{aDay.day_wind_direction}}:{{aDay.day_wind_power}}</span>
                    <br>
                    <span>晚间天气:{{aDay.night_weather}}</span>
                    <span>{{aDay.night_wind_direction}}:{{aDay.night_wind_power}}</span>
                    <br>
                </section>
            {{/each}}
        </script>
    </div>
</body>
<script type="text/javascript">
    var url = "http://route.showapi.com/9-9?";
    var appid = "showapi_appid=30258&";
    var sign = "showapi_sign=940b68652b514c01a77fde2101c989aa&";
    var tempData;
    $.get(url + appid + sign + "area=芜湖&", function (data, status) {
        // var jsdata = JSON.parse(data);
        console.log(data.showapi_res_body);
        tempData = data.showapi_res_body;
        var html = template("day", tempData);
        $("#content").html(html);

    });

    // console.log($("#content").html());
    // url = url + appid + sign + city;
    $("button").click(function () {
        var city = $("#city").val();
        if(city == ""){
            alert("请输入一个城市");
        }else {
            city = "area=" + city + "&";
            $.get(url + appid + sign + city, function (data, status) {
                console.log(data.showapi_res_body);
                tempData = data.showapi_res_body;
                var html = template("day", tempData);
                $("#content").html(html);
            });
        }
    });

</script>
</html>
